<template>
  <div
    v-if="slidesList && slidesList.show == '1'"
    class="new-carousel"
    :style="{
      'margin-top': margintop + 'px',
      height: height + 'px',
    }"
  >
    <div class="block" style="z-index: 10" v-if="slidesList.style == 0">
      <el-carousel trigger="click" height="180px" style="z-index: 10">
        <el-carousel-item
          v-for="(item, index) in slidesList.banner"
          :key="index"
        >
          <img
            :src="$fnc.getImgUrl(item.piclink + '?' + new Date().getTime())"
            alt
            crossOrigin="anonymous"
          />
        </el-carousel-item>
      </el-carousel>
    </div>
    <div
      class="fx hotel_card"
      style="z-index: 10"
      v-if="
        slidesList.style == 1 &&
        $store.state.plugin.hotel &&
        $store.state.plugin.hotel.is_open == 1
      "
    >
      <p class="fx">
        <span>你要去哪里？</span>
        <span>入驻日期</span>
        <span>共2晚</span>
      </p>
      <p class="fx">
        <span>福州市</span>
        <span>6月9日 - 6月11日</span>
      </p>
      <p class="fx">
        <span>查找酒店</span>
      </p>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      top: -100,
    };
  },
  computed: {
    ...mapState({
      slidesList: (state) => state.modulePage.data.slides,
      tuanzhang: (state) => state.modulePage.moduledata.tuanzhang,
      show_cate: (state) => state.modulePage.moduledata.is_show_cate,
    }),
    height() {
      var height = 180;
      if (
        this.slidesList.style == 1 &&
        this.$store.state.plugin.hotel &&
        this.$store.state.plugin.hotel.is_open == 1
      ) {
        height = 120;
      }
      return height;
    },
    margintop() {
      var top = -100;
      if (
        this.slidesList.style == 1 &&
        this.$store.state.plugin.hotel &&
        this.$store.state.plugin.hotel.is_open == 1
      ) {
        top = -50;
      } else if (
        this.$store.state.plugin.xxmk &&
        this.$store.state.plugin.xxmk.is_open == 1 &&
        this.tuanzhang == "1" &&
        this.show_cate == "1"
      ) {
        top = -100;
      } else if (this.tuanzhang == "0" && this.show_cate == "0") {
        top = -145;
      } else {
        top = -120;
      }

      return top;
    },
  },

  mounted() {},
  methods: {},
  watch: {},
};
</script>

<style scoped lang="less">
.new-carousel {
  width: 94%;
  height: 180px;
  left: 0;
  right: 0;
  // margin: -100px auto 0 auto;
  margin: 0 auto;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  cursor: pointer;
  z-index: 10;
  // margin-top: -100px;
  img {
    width: 100%;
    height: 100%;
    border-radius: 5px;
  }
}
.hotel_card {
  width: 100%;
  height: 100%;
  background: #ffffff;
  border-radius: 10px;
  padding: 10px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.16);
  flex-direction: column;
  > p {
    width: 100%;
    &:nth-of-type(1) {
      font-size: 12px;
      color: #b5b5b5;
      > span {
        width: 33%;
        &:nth-of-type(3) {
          color: #333333;
          text-align: right;
        }
      }
    }
    &:nth-of-type(2) {
      font-size: 18px;
      color: #222222;
      > span {
        width: 33%;
        &:nth-of-type(2) {
          width: 66%;
        }
      }
    }
    &:nth-of-type(3) {
      font-size: 20px;
      font-weight: bold;
      color: #222222;
      text-align: center;
      justify-content: center;
      > span {
        width: 80%;
        background: #ffdd00;
        padding: 5px 0;
        border-radius: 3px;
      }
    }
  }
}
</style>
